<!--
 * @Author: xuxu12138 1718324422@qq.com
 * @Date: 2023-11-25 08:07:39
 * @LastEditors: xuxu12138 1718324422@qq.com
 * @LastEditTime: 2024-09-04 09:11:33
 * @FilePath: /things-admin/src/view/questionnaire/questionnaire.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <div class="header">
      <Button
        type="primary"
        style="margin: 0 400px 0 0"
        size="default"
        @click="AddPointMsg"
         v-if="Validation.check(Resources.QUESTIONNAIRE_ADD)"
        >新增问卷
      </Button>

      <Select
        v-model="model"
        style="width: 200px; margin-right: 10px"
        placeholder="型号"
      >
        <Option
          v-for="item in cityList"
          :value="item.value"
          :key="item.value"
          >{{ item.label }}</Option
        >
      </Select>
      <Space size="large" wrap>
        <Input  v-model="valueName" style="width: 200px" placeholder="问卷名称"/>
      </Space>
      <Button
        type="primary"
        icon="ios-search"
        style="margin: 0 10px"
        size="default"
        @click="searchID"
        >查询
      </Button>
      <Button
        icon="md-refresh"
        style="margin-right: 10px"
        size="default"
        @click="reset"
        >重置</Button
      >
    </div>
    <div class="body">
      <Table border :columns="columns" :data="data">
        <template slot-scope="{ row, index }" slot="status">
          <!-- {{ row.status?'开启':'关闭' }} -->
          <el-switch
            v-model="row.status"
            active-color="#2d8cf0"
            inactive-color="#ccc"
            :active-value="1"
            :inactive-value="0"
            @change="changeSwitch(row)"
          >
          </el-switch>
        </template>
        <template slot-scope="{ row, index }" slot="zhanshi">
          <span>{{ row.startTime }}</span>
          <span> - </span>
          <span>{{ row.endTime }}</span>
        </template>
        <template #action="{ row, index }">
          <Button
            type="primary"
            size="small"
            style="margin-right: 5px"
             v-if="Validation.check(Resources.QUESTIONNAIRE_DATAIL)"
            @click="enterDetail(row)"
            >详情</Button
          >
          <Button
            type="success"
            size="small"
            style="margin-right: 5px"
            @click="editPage(row)"
             v-if="Validation.check(Resources.QUESTIONNAIRE_UPDATE)"
            >编辑</Button
          >
          <Button
            type="error"
            size="small"
            style="margin-right: 5px"
             v-if="Validation.check(Resources.QUESTIONNAIRE_DELETE)"
            @click="deleteQuestion(row.id)"
            >删除</Button
          >
          <!-- <Button
            type="warning"
            size="small"
            style="margin-right: 5px"
            @click="deletePage(row.id)"
            >关闭</Button
          > -->
        </template>
      </Table>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <span>确定要关闭该问卷吗</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" >确 定</el-button>
      </span>
    </el-dialog>
    <div style="display: flex;justify-content: space-between;margin-top: 20px;">
      <div></div>
      <Page :total="total" show-sizer  @on-change="changeSizeValue"/>
    </div>
    <Modal
    title="提示"
        v-model="isDelete"
        @on-ok="ok"
        @on-cancel="cancel">
        <p>确定要删除该条问卷数据吗</p>
    </Modal>
  </div>
</template>

<script>
import { getDeviceMaintainList } from "@/base/api/DeviceMaintainApi";
import {
  questionAll,
  questionnaireID,
  updateStatus,
  questionnairedelete
} from "@/base/api/Question";
import { Validation } from "@/base/Validation";
import { Resources } from "@/base/Resources";
export default {
  data() {
    return {
      List: [],
      deleteid: "",
      dialogVisible: false,
      deletequestionid:0,
      isDelete:false,
      model: "",
      Validation:Validation,
      Resources:Resources,
      pageIndex: 1,
      pageSize: 10,
      sortDirection: "ASC",
      valueDate: "",
      valueName: "",
      total:0,
      columns: [
        {
          title: "ID",
          key: "id",
        },
        {
          title: "名称",
          key: "questionnaireName",
        },
        {
          title: "创建时间",
          key: "created",
        },
        {
          title: "展示时段",
          slot: "zhanshi",
          width:300
        },
        {
          title: "问卷份数",
          key: "number",
        },
        // {
        //   title: "自动程序ID",
        //   key: "zidong",
        // },
        {
          title: "状态",
          slot: "status",
        },

        {
          title: "操作",
          slot: "action",
          width: 220,
          align: "center",
          fixed: "right",
        },
      ],
      data: [],
      cityList: [],
    };
  },
  mounted() {
    //拿到所有机型所对应的型号

    this.questionAllData();
    getDeviceMaintainList({
      pageIndex: 1,
      pageSize: 10,
      sortId: 1324949759328288,
      sortDirection: "DESC",
    }).then((res) => {
      console.log(res);
      res.data.items.forEach((item) => {
        let obj = {};
        obj.value = item.id;
        obj.label = item.modelName;
        this.cityList.push(obj);
      });
    });
  },
  methods: {
    //问卷数据全部
    questionAllData() {
      questionAll({
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        modelId: this.model || '',
        sortDirection: this.sortDirection,
        questionnaireName: this.valueName || ''
      }).then((res) => {
        console.log(res,'dasjd')
        this.data = res.data.items.reverse();
        this.total = res.data.itemCount
      });
    },
    //查询数据
    searchID() {
      this.pageIndex = 1;
      this.pageSize = 10;
      this.questionAllData();
    },
    changeDate(data) {
      //将标准时间格式转换
      this.valueDate = data;
    },
    //进入创建问卷页面
    AddPointMsg() {
      this.$router.push({
        path: "/questionnaire/create",
        query:{
          status:true
        }
      });
    },
    //重置
    reset() {
      this.model = "";
      this.valueName = "";
      this.questionAllData();
    },
    //进入详情页
    enterDetail(data) {
      this.$router.push({
        path: "/questionnaire/detail",
        query: {
          id: data.id,
        },
      });
    },
    deleteQuestion(id){
       this.deletequestionid = id;
       this.isDelete = true
    },
    ok(){
      questionnairedelete(this.deletequestionid).then(res=>{
        this.isDelete = false
        this.questionAllData();
        this.$message.success('删除成功')
      })
    },
    cancel(){
      this.isDelete = false
    },
    // changeSizeValue 改变后的页码
    changeSizeValue(data){
       console.log(data)
       this.pageIndex = data;
       this.questionAllData()
    },
    //修改状态
    changeSwitch(data) {
      updateStatus(data.id).then((res) => {
        this.$message.success("状态修改成功");
        this.questionAllData();
      });
    },
    //进入修改页
    editPage(data) {
        this.$router.push({
          path: "/questionnaire/edit",
          query: {
            status: true,
            id:data.id,
            isEdit: true,
          },
        });
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  height: 66px;
  //   width: 500px;
  background-color: #f8f8f8;
  display: flex;
  align-items: center;
  padding: 0 15px;
}
.body {
  margin-top: 20px;
}
</style>
